<template>
  <div>
    <van-notice-bar text="请填写邀请您的店主的邀请码。邀请码为6位数字和字母。"></van-notice-bar>
    <van-cell-group class="user-group">
      <van-field label="邀请码" :value="inviteCode" placeholder="请输入邀请码" @change="onChangeCode"></van-field>
      <van-cell v-if="me.inviter_wechat_no" title="邀请人微信号" :value="me.inviter_wechat_no"/>
      <van-cell v-if="me.change_invite_id_times&&me.change_invite_id_times>=1" title="修改时间" :value="me.change_invite_id_at"/>
    </van-cell-group>

    <div class="info">
      <div class="icon">
        <van-icon name="question"/>
      </div>
      <p>填写邀请码后，只有2次修改机会。
        <br>未下单的用户，在下单前都可以修改。
        <br>已下单的用户，注册365天内可以修改。
      </p>
    </div>

    <div class="save-btn">
      <van-button class="mk-button" type="primary" size="normal" block="true" @click="submit">设置</van-button>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import * as UserAction from '@/api/user'
import Toast from 'vant-weapp/dist/toast/toast'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      inviteCode: ''
    }
  },
  computed: mapState(['me']),
  methods: {
    onChangeCode (event) {
      this.inviteCode = event.mp.detail
    },
    submit () {
      UserAction.setInviteUser(this.inviteCode)
        .then((data) => {
          Toast('设置成功')
          this.$store.commit('set_me', data)
          wx.switchTab({ url: './index' })
        })
        .catch(err => Toast(err.msg))
    }
  },
  onShow () {
    this.inviteCode = ''
  }
}
</script>

<style lang="less" scoped>
.info {
  background: #fff;
  padding: 15px;
  color: #999;
  font-size: 12px;
  .icon {
    float: left;
    padding-top: 3px;
  }
  p {
    margin: 0 0 0 20px;
  }
}

.save-btn {
  margin: 20rpx;
}
</style>
